<template>
  <div class="panel">
    <el-skeleton :loading="loading" animated>
      <template #template><el-skeleton-item variant="rect" style="height:180px"/></template>
      <template #default>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="设备名称">{{ base.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备规格">{{ base.spec || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备型号">{{ base.model || '-' }}</el-descriptions-item>

          <el-descriptions-item label="设备材质">{{ base.material || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备功率">{{ base.power || '-' }}</el-descriptions-item>
          <el-descriptions-item label="设备品牌">{{ base.brand || '-' }}</el-descriptions-item>

          <el-descriptions-item label="制造厂家">{{ base.manufacturer || '-' }}</el-descriptions-item>
          <el-descriptions-item label="编码">{{ base.code || node?.code || '-' }}</el-descriptions-item>
          <el-descriptions-item label="所在路径" :span="3">
            <span class="one-line">{{ fullPath(node?.id) }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="备注" :span="3">{{ base.remark || node?.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-skeleton>
    <el-empty v-if="!loading && isEmpty" description="暂无基础信息" />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { getAssetBasic } from '@/api/sbtz/assetExtra'

const props = defineProps({
  node: { type: Object, required: true },
  fullPath: { type: Function, default: () => '' } // 父组件传来的 fullPathOf
})

const loading = ref(false)
const base = ref({})
const isEmpty = computed(() => !Object.keys(base.value || {}).length)

async function fetch() {
  if (!props.node?.id) return
  loading.value = true
  try {
    const { data } = await getAssetBasic(props.node.id)
    base.value = data || {}
  } finally {
    loading.value = false
  }
}
watch(() => props.node?.id, fetch, { immediate: true })
onMounted(fetch)
</script>

<style scoped>
.panel{ padding: 8px; }
.one-line{ display:inline-block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>
